<div th:fragment="content">
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">车位管理</h5>
            <button class="btn btn-primary" onclick="openAddModal()">新增车位</button>
        </div>
        <div class="card-body">
            <form id="searchForm" class="row g-3 mb-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" name="spaceNumber" placeholder="车位编号">
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="spaceType">
                        <option value="">全部类型</option>
                        <option value="1">普通</option>
                        <option value="2">充电</option>
                        <option value="3">残疾人</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="status">
                        <option value="">全部状态</option>
                        <option value="1">空闲</option>
                        <option value="2">占用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
                    <button type="button" class="btn btn-secondary" onclick="resetSearch()">重置</button>
                </div>
            </form>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>停车场</th>
                            <th>车位编号</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="dataTable">
                        <!-- 数据通过JS加载 -->
                    </tbody>
                </table>
            </div>
            <nav>
                <ul class="pagination justify-content-center" id="pagination"></ul>
            </nav>
        </div>
    </div>
    <!-- 新增/编辑模态框 -->
    <div class="modal fade" id="parkingSpaceModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="parkingSpaceForm">
                    <input type="hidden" id="id" name="id">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">新增车位</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">所属停车场</label>
                            <select class="form-select" id="lotId" name="lotId" required></select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">车位编号</label>
                            <input type="text" class="form-control" id="spaceNumber" name="spaceNumber" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">车位类型</label>
                            <select class="form-select" id="spaceType" name="spaceType" required>
                                <option value="1">普通</option>
                                <option value="2">充电</option>
                                <option value="3">残疾人</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" id="status" name="status" required>
                                <option value="1">空闲</option>
                                <option value="2">占用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
    let currentPage = 1;
    const pageSize = 10;
    let modal;
    $(function() {
        modal = new bootstrap.Modal(document.getElementById('parkingSpaceModal'));
        loadAllLots();
        loadData();
    });
    function loadData() {
        const params = $('#searchForm').serialize() + `&pageNum=${currentPage}&pageSize=${pageSize}`;
        $.get('/api/parking-space/page?' + params, function(res) {
            if (res.code === 200) {
                renderTable(res.data.records);
                renderPagination(res.data);
            } else {
                alert(res.message);
            }
        });
    }
    function renderTable(data) {
        const tbody = $('#dataTable');
        tbody.empty();
        data.forEach(item => {
            tbody.append(`
                <tr>
                    <td>${item.id}</td>
                    <td>${item.lotName || ''}</td>
                    <td>${item.spaceNumber}</td>
                    <td>${item.spaceType === 1 ? '普通' : item.spaceType === 2 ? '充电' : '残疾人'}</td>
                    <td>${item.status === 1 ? '空闲' : item.status === 2 ? '占用' : '禁用'}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" onclick="openEditModal(${item.id})">编辑</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteItem(${item.id})">删除</button>
                    </td>
                </tr>
            `);
        });
    }
    function renderPagination(page) {
        const pagination = $('#pagination');
        pagination.empty();
        pagination.append(`
            <li class="page-item ${page.current === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${page.current - 1})">上一页</a>
            </li>
        `);
        for (let i = 1; i <= page.pages; i++) {
            pagination.append(`
                <li class="page-item ${page.current === i ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                </li>
            `);
        }
        pagination.append(`
            <li class="page-item ${page.current === page.pages ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${page.current + 1})">下一页</a>
            </li>
        `);
    }
    function changePage(page) {
        currentPage = page;
        loadData();
    }
    function openAddModal() {
        $('#modalTitle').text('新增车位');
        $('#parkingSpaceForm')[0].reset();
        $('#id').val('');
        modal.show();
    }
    function openEditModal(id) {
        $.get('/api/parking-space/' + id, function(res) {
            if (res.code === 200) {
                const d = res.data;
                $('#id').val(d.id);
                $('#lotId').val(d.lotId);
                $('#spaceNumber').val(d.spaceNumber);
                $('#spaceType').val(d.spaceType);
                $('#status').val(d.status);
                $('#modalTitle').text('编辑车位');
                modal.show();
            } else {
                alert(res.message);
            }
        });
    }
    function formToJson($form) {
        const unindexed_array = $form.serializeArray();
        const indexed_array = {};
        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });
        return indexed_array;
    }
    function save() {
        const id = $('#id').val();
        const method = id ? 'PUT' : 'POST';
        const url = id ? '/api/parking-space/' + id : '/api/parking-space';
        $.ajax({
            url: url,
            method: method,
            contentType: 'application/json',
            data: JSON.stringify(formToJson($('#parkingSpaceForm'))),
            success: function(res) {
                if (res.code === 200) {
                    modal.hide();
                    loadData();
                } else {
                    alert(res.message);
                }
            }
        });
    }
    function deleteItem(id) {
        if (confirm('确定要删除吗？')) {
            $.ajax({
                url: '/api/parking-space/' + id,
                method: 'DELETE',
                success: function(res) {
                    if (res.code === 200) {
                        loadData();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }
    }
    function search() {
        currentPage = 1;
        loadData();
    }
    function resetSearch() {
        $('#searchForm')[0].reset();
        search();
    }
    function loadAllLots() {
        $.get('/api/parking-lot/list', function(res) {
            if (res.code === 200) {
                const select = $('#lotId');
                select.empty();
                res.data.forEach(item => {
                    select.append(`<option value="${item.id}">${item.name}</option>`);
                });
            }
        });
    }
    </script>
</div> 